<template>
	<view class="video-wrap">
		<u-popup mode="center" bgColor="rgba(0,0,0,0)" :show="visible" close-on-click-overlay @close="onClose">
			<view class="video-container-wrap">
				<video :src="source" :enable-progress-gesture="false" :initial-time="0" @timeupdate="onTimeUpdate" loop
					:muted="isMuted" id="videoRef" :show-center-play-btn="false" :controls="false" class="video-target"
					object-fit="contain" @loadedmetadata="videoLoadEnd" autoplay></video>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isMuted: false,
			}
		},
		methods: {
			onClose() {
				this.$emit('close', false)
			},
			videoLoadEnd(ev) {

			},
			onTimeUpdate(ev) {

			},
		},
		props: {
			visible: {
				type: Boolean,
				required: true,
			},
			source: {
				type: String,
				required: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-wrap {
		.video-container-wrap {
			width: 90vw;
			height: 100vh;
			border: 1px solid red;
			position: relative;
			box-sizing: border-box;
			padding: 32rpx;
			background: transparent;

			.video-target {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>